<!-- 数据字典 -->
<template>
	<div class="table-container">
		<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
			<div class="team-trees">
				<el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
				<div class="team-tree">
					<el-tree class="filter-tree" :data="EnumDicType" :props="defaultProps" ref="tree" default-expand-all
						:filter-node-method="filterNode" @node-click="handleNodeClick">
						<template v-slot="scope">
							<!-- {{scope.data.$treeNodeId}}.{{scope.data.Label}} -->
							{{EnumDicType.indexOf(scope.data)+1}}.{{scope.data.Label}}
						</template>
					</el-tree>
				</div>
			</div>
		</el-col>
		<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
			<div class="team-trees">
				<div class="team2 flex al-ct">{{treeNodeId}}.{{EnumDicTypeName}}<span v-if="button.排序">(支持拖动排序)</span>
				</div>
				<div class="flex al-ct wrap">
					<div class="team-tag">
						<el-tag class="team-button" :key="tag.SysDicID" v-for="tag in list" :closable="button.删除"
							size="medium" type="info" :disable-transitions="false" @close="del(tag)">
							{{tag.SysDicName}}
							<vab-remix-icon icon="pencil-fill" class="vab-icon" @click="edit(tag)" v-if="button.编辑" />
						</el-tag>
					</div>
					<el-input class="input-new-tag" v-if="inputVisible&&button.新建" v-model="inputValue"
						ref="saveTagInput" size="mini" @keyup.enter.native="addSave" @blur="addSave">
					</el-input>
					<el-button v-else-if="button.新建" class="button-new-tag" icon="el-icon-plus" size="small"
						@click="addOpen">新建
					</el-button>
				</div>
			</div>
		</el-col>
	</div>
</template>

<script>
	import Sortable from 'sortablejs';
	import common from "@/common/common.js";

	export default {
		name: "SysDicList",
		mixins: [common.baseVM],
		data() {
			return {
				treeNodeId: null,
				EnumDicTypeName: '',
				loading: false,
				defaultProps: {
					children: 'Children',
					label: 'Label'
				},
				filterText: '',
				list: [],
				inputVisible: false,
				inputValue: '',
				form: {
					SysDicID: 0,
					EnumDicType: 0,
					SysDicName: ''
				},
				button: {
					新建: true,
					编辑: true,
					删除: true,
					排序: true
				}
			}
		},
		computed: {
			EnumDicType() {
				var temp = EnumDicType;
				if (temp == null) return [];
				return temp;
			},
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		mounted() {
			const tbody = document.querySelector('.team-tag')
			const self = this;
			if (self.button.排序 == false) return;
			Sortable.create(tbody, {
				onEnd({
					newIndex,
					oldIndex
				}) {
					const currRow = self.list.splice(oldIndex, 1)[0]
					self.list.splice(newIndex, 0, currRow);

					var idList = [];
					for (var i = 0; i < self.list.length; i++) {
						idList.push(self.list[i].SysDicID);
					}
					console.log(idList);
					var post = self.toKeyValue({
						ids: idList
					});
					self.post("api/System/SysDicOrder", post).then((data) => {
						self.showToast(data.Message, "success");
						self.getList();
					});
				},
			})
		},
		methods: {
			init() {
				this.handleNodeClick(this.EnumDicType[0]);
			},

			filterNode(value, data) {
				if (!value) return true;
				value = value.toLowerCase();
				var pinYin = Mtils.utils.makePy(data.Label).toLowerCase();
				var r = data.Label.indexOf(value) != -1 || pinYin.indexOf(value) != -1;
				return r;
			},
			handleNodeClick(data) {
				this.form.EnumDicType = data.Value;
				// this.treeNodeId = data.$treeNodeId;
				this.treeNodeId = this.EnumDicType.indexOf(data) + 1;
				this.EnumDicTypeName = data.Label;
				this.getList();
			},
			getList() {
				var typeid = this.form.EnumDicType;
				if (!typeid) return;
				this.showAddIco = false;
				var post = this.toKeyValue({
					EnumDicType: typeid
				});
				this.post("/api/System/SysDicList", post).then((data) => {
					this.list = data.Result;
					this.showAddIco = true;
				});
			},
			del(tag) {
				//this.list.splice(this.list.indexOf(tag), 1);
				this.confirm('确认删除[' + tag.SysDicName + ']?',
					() => {
						var post = {
							id: tag.SysDicID
						};
						this.post('api/System/SysDicDel', this.toKeyValue(post)).then(data => {
							this.showToast(data.Message, "success");
							this.getList();
						});
					});
			},
			addOpen() {
				this.form.SysDicID = 0;
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},
			addSave() {
				let inputValue = this.inputValue;
				if (!inputValue) {
					this.inputVisible = false;
					this.inputValue = '';
					return;
				}
				this.form.SysDicName = inputValue;
				this.post('/api/System/SysDicAdd', this.form).then(data => {
					this.showToast(data.Message, "success");
					this.getList();
					this.inputVisible = false;
					this.inputValue = '';
				});
			},
			edit(data) {
				common.prompt({
					message: data.SysDicName,
					title: "编辑" + this.EnumDicTypeName,
					inputValue: data.SysDicName,
					showCancelButton: false,
					inputPattern: /./,
					inputErrorMessage: '请输入字典值!',
					success: (val) => {
						if (!val) {
							return;
						}
						this.form.SysDicName = val;
						this.form.SysDicID = data.SysDicID;
						this.post('/api/System/SysDicAdd', this.form).then((data) => {
							this.showToast(data.Message, "success");
							this.getList();
							this.form.SysDicName = '';
						});
					}
				});
			}
		},
	}
</script>
